<template>
  <div class="myMusic">
    <Home></Home>

    <div class="myMusic_main">
      <div class="loginbox" v-if="this.loginbox == 0">
        <el-form :model="loginForm" ref="loginFormRef">
          <span class="loginbox_header"
            >登录
            <i
              class="el-icon-close"
              style="position: absolute; right: 5px; top: 12.5px"
              @click="toLogin()"
            ></i>
          </span>
          <img
            src="@/assets/images/login.png"
            alt=""
            style="margin-left: 135px"
          />
          <el-input
            v-model="loginForm.username"
            placeholder="手机号/网易邮箱"
          ></el-input>
          <el-input
            placeholder="请输入密码"
            v-model="loginForm.password"
            show-password
            @keyup.enter="login()"
          ></el-input>
         <el-button
            type="info"
            style="margin-left: 100px; margin-top: 25px"
            @click="login()"
            >手机号登录</el-button
          > <el-button
            type="info"
            style="margin-left: 80px; "
            @click="loginE()"
            >邮箱登录</el-button
          >
        </el-form>
      </div>
      <div class="myMusic_content">
        <button class="mmbutton" @click="toLogin()">立即登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import Home from "@/components/content/Home/Home.vue";
import axios from "axios";
export default {
  name: "mymusic",
  components: { Home },
  data() {
    return {
      loginbox: "1",
      //登录表单的数据绑定对象
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  // created() {},
  methods: {
    toLogin() {
      this.loginbox = !this.loginbox;
    },
    login() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        axios({
          url: "http://localhost:3000/login/cellphone",
          method: "get",
          params: {
            phone: this.loginForm.username,
            password: this.loginForm.password,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            window.sessionStorage.setItem("cookie", res.data.cookie);
            alert("登录成功");
            this.loginbox = !this.loginbox;
            this.$router.push("/my/m/music")
            
          } else alert("登录失败");
        });
      });
    },
    loginE() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        axios({
          url: "http://localhost:3000/login",
          method: "get",
          params: {
            email: this.loginForm.username,
            password: this.loginForm.password,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            window.sessionStorage.setItem("cookie", res.data.cookie);
     
            this.loginbox = !this.loginbox;
            this.$router.push("/discover");
            location. reload()
          } else alert("登录失败");
        });
      });
      
    },
  },
};
</script>
<style>
.myMusic_main {
  width: 982px;
  height: 700px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  border: solid 1px rgb(211, 211, 211);
}
.myMusic_content {
  position: relative;
  width: 807px;
  height: 268px;
  margin: 104px 86.5px 0 86.5px;
  background-image: url(../../assets/images/mymusic.png);
}
.myMusic {
  background-color: rgb(245, 245, 245);
}
.mmbutton {
  background-color: rgb(43, 123, 201);
  width: 167px;
  height: 45px;
  position: absolute;
  right: 150px;
  top: 220px;
  border-radius: 10px;
  border: solid 1px #fff;
  line-height: 45px;
  font-size: 20px;
}
.loginbox {
  position: relative;
  width: 530px;
  height: 372px;
  top: 317px;
  left: 720px;
  z-index: 9998;
  border: solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.loginbox_header {
  display: block;
  width: 530px;
  height: 40px;
  background-color: rgb(45, 45, 45);
  line-height: 40px;
  color: #fff;
  padding-left: 5px;
}
</style>
